<template>
  <globle-dialog
    ref="globleDialogRef"
    :title="globleDialogConfig.title"
    @onClickConfirmBtn="onConfirm"
    @onClickCancelBtn="onCancel"
    @onDialogOpen="onDialogOpen"
    @onDialogColsed="onDialogColsed"
  >
    <globle-form ref="globleFormRef" :bindData="globleFormConfig.bindData" :itemConfig="globleFormConfig.itemConfig"></globle-form>
  </globle-dialog>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
import { APIData, IRecruitment } from '../../../type';
import { formType, IGlobleFormProps } from '../../../components/form/type';
import { useAPI } from '../../../request/api';
import { useUserStore } from '../../../store/user';
import { ElMessage } from 'element-plus';

const api = useAPI();
const store = useUserStore();
const globleDialogRef = ref();
const globleFormRef = ref();
const errorNecessaryMsg = '这是必填项';

const validateIdentityId = (rule: any, value: string, callback: any) => {
  if (value === '') {
    callback(new Error(errorNecessaryMsg));
  } else if (!value.match(/^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/)) {
    callback(new Error('身份证不合法'));
  } else {
    callback();
  }
};
const validateQQ = (rule: any, value: string, callback: any) => {
  if (value === '') {
    callback(new Error(errorNecessaryMsg));
  } else if (!value.match(/^[1-9][0-9]{4,12}$/)) {
    callback(new Error('QQ号不合法'));
  } else {
    callback();
  }
};
const validatePhone = (rule: any, value: string, callback: any) => {
  if (value === '') {
    callback(new Error(errorNecessaryMsg));
  } else if (!value.match(/^(?:(?:\+|00)86)?1[3-9]\d{9}$/)) {
    callback(new Error('手机号不合法'));
  } else {
    callback();
  }
};

const globleDialogConfig = { title: '个人信息' };
const globleFormConfig: IGlobleFormProps = reactive({
  bindData: {} as IRecruitment,
  itemConfig: [
    {
      type: formType.input,
      label: '学 号',
      prop: 'studentId',
      placeholder: '请输入',
      isShow: true,
      rules: [{ required: true, message: errorNecessaryMsg, trigger: 'blur' }],
    },
    {
      type: formType.input,
      label: '姓 名',
      prop: 'name',
      placeholder: '请输入',
      isShow: true,
      rules: [{ required: true, message: errorNecessaryMsg, trigger: 'blur' }],
    },
    {
      type: formType.select,
      label: '性 别',
      prop: 'sex',
      isShow: true,
      rules: [{ required: true, message: errorNecessaryMsg, trigger: 'change' }],
      options: [
        { label: '男', value: 1 },
        { label: '女', value: 0 },
      ],
    },
    {
      type: formType.input,
      label: '专 业',
      prop: 'major',
      placeholder: '请输入',
      isShow: true,
      rules: [{ required: true, message: errorNecessaryMsg, trigger: 'blur' }],
    },
    {
      type: formType.input,
      label: '学 院',
      prop: 'college',
      placeholder: '请输入',
      isShow: true,
      rules: [{ required: true, message: errorNecessaryMsg, trigger: 'blur' }],
    },
    {
      type: formType.input,
      label: '手机号',
      prop: 'phone',
      placeholder: '请输入',
      isShow: true,
      rules: [
        { required: true, message: errorNecessaryMsg, trigger: 'blur' },
        { validator: validatePhone, trigger: 'blur' },
      ],
    },
    {
      type: formType.input,
      label: 'QQ号',
      prop: 'qq',
      placeholder: '请输入',
      isShow: true,
      rules: [
        { required: true, message: errorNecessaryMsg, trigger: 'blur' },
        { validator: validateQQ, trigger: 'blur' },
      ],
    },
    {
      type: formType.input,
      label: '身份证号',
      prop: 'identityId',
      placeholder: '请输入',
      isShow: true,
      rules: [
        { required: true, message: errorNecessaryMsg, trigger: 'blur' },
        { validator: validateIdentityId, trigger: 'blur' },
      ],
    },
    {
      type: formType.select,
      label: '选拔考试',
      prop: 'isExam',
      isShow: true,
      rules: [{ required: true, message: errorNecessaryMsg, trigger: 'change' }],
      options: [
        { label: '已参加', value: 1 },
        { label: '未参加', value: 0 },
      ],
    },
  ],
});

const openDialogByEdit = (row: IRecruitment) => {
  globleDialogRef.value.isShowDialog = true;
  globleFormConfig.bindData = JSON.parse(JSON.stringify(row));
};

const openDialogByAdd = () => {
  globleDialogRef.value.isShowDialog = true;
};

const emit = defineEmits(['onReGetData']);
//点击确定
const onConfirm = () => {
  const formEl = globleFormRef.value.formRef;
  formEl.validate((valid: boolean) => {
    if (valid)
      save().then(code => {
        if (code === 200) {
          emit('onReGetData');
          globleDialogRef.value.isShowDialog = false;
        }
      });
    else return false;
  });
};

//点击取消
const onCancel = () => {
  ElMessage.success('您取消了操作');
  globleDialogRef.value.isShowDialog = false;
};

//监听弹窗开启
const onDialogOpen = () => {
  const formEl = globleFormRef.value.formRef;
  formEl.clearValidate();
};

//监听弹窗关闭
const onDialogColsed = () => {
  const formEl = globleFormRef.value.formRef;
  globleFormConfig.bindData = {};
  formEl.clearValidate();
};

const save = async () => {
  const res: APIData = await api.save(globleFormConfig.bindData, store.role, 'recruitment');
  if (res.code === 200) {
    ElMessage.success(res.message);
  } else {
    ElMessage.error(res.message);
    return;
  }
  return res.code;
};

defineExpose({ openDialogByEdit, openDialogByAdd });
</script>

<style scoped></style>
